<template>
	<!-- 个人中心 -->
	<view class="container">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image class="avatar" :src="avatar"></image>
    </button> 
    <view class="input">
      <view class="input-label">昵称：</view>
      <input type="nickname" v-model="nickname" @change="getNickname" class="input-txt" placeholder="请输入昵称"/>
    </view>
    <view class="bank_bottom" @tap="addUserInfo()">
        保存
      </view>
	</view>
</template>

<script>
	import {
		postUserInfoData,
	} from '../../api/api.js';
  import {HTTP_ADMIN_URL, TOKENNAME} from '@/config/app.js';
  import {mapGetters} from "vuex";
	export default {
    computed: mapGetters([ "userInfo", "token"]),
		data() {
			return {
        nickname: '',
        avatar: '',
        url: ''
			}
		},
    onShow() {
      this.nickname = this.userInfo.nickname
      this.avatar = this.userInfo.avatar
    },
		methods: {
			// 保存
			addUserInfo() {
				postUserInfoData({
          avatar: this.avatar,
          nickname: this.nickname
        }).then(res => {
          uni.showToast({
            title: '保存成功',
            icon: 'none'
          })
          uni.navigateBack()
				}).catch(err => {
					console.log(err);
				});
			},
      getNickname(e) {
        console.log(e, 'e----')
        this.nickname = e.detail.value
      },
      onChooseAvatar(e) {
        this.avatar = e.detail.avatarUrl
        let that = this
        let urlPath = HTTP_ADMIN_URL + '/api/front/user/upload/image?model=maintain&pid=0'
				let localPath = e.detail.avatarUrl;
        console.log(e.detail.avatarUrl)
				uni.uploadFile({
					url: urlPath,
					filePath: localPath,
					name: 'multipart',
					header: {
            "Content-Type": "multipart/form-data",
						[TOKENNAME]: this.token
					},
					success: function(res) {
						if (res.statusCode == 403) {
							
						} else {
							let data = res.data ? JSON.parse(res.data) : {};
							if (data.code == 200) {
                that.avatar = data.data.url
							}
						}
					},
					fail: function(res) {
						uni.showToast({
							title: '上传图片失败'
						});
					}
				})
      }
		}
	}
</script>

<style lang="scss">
.container {
  padding: 40rpx;
}
.avatar-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.input {
  display: flex;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  height: 80rpx;
  align-items: center;
  margin-top: 40rpx;
  &-label {
    width: 200rpx
  }
  &-txt {
    flex: 1;
  }
}
.bank_bottom {
    width: 100%;
    margin-top: 39rpx;
    padding: 22rpx 0;
    text-align: center;
    background: #DF4B43;
    border-radius: 55rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
</style>
